<template>
	<view class="container" v-if="isPageShow">
		<!-- 	// userIdentityStatus, // /用户身份：0 试用零工 1 正式零工 2 金牌晋升期
		// idCardNum, //实名认证
		// frockFlag, //是否购买工装  0 否  1 是  studyFlag 是否学习   ,ensureAccount 保证金 -->
		<view
			:class="[content.userIdentityStatus==0&&'bg',content.userIdentityStatus==1&&'bg-zhengshi',content.userIdentityStatus==2&&'bg-vip']">
			<view class="my" @click="handleOpenPage(0)">
				<text :style="{color:vipFlag!=0 && vipTime?'#FFFFFF':''}">个人资料{{ completePercent }}%</text>
				<image :src="vipFlag!=0 && vipTime?'/static/icon1/36-1.png':'/static/icon1/36.png'" mode="aspectFill">
				</image>
			</view>
			<view class="my-refuse" @click="goindex">
				<image v-if="vipFlag && vipTime" style="width: 100%;height: 100%;"
					src="/static/homechange/refuseVIP.png" mode="aspectFill">
				</image>
				<image v-else style="width: 100%;height: 100%;" src="/static/homechange/refuse.png" mode="aspectFill">
				</image>
			</view>
		</view>
		<!-- 我的信息 @click="handleOpenPage(18)"-->
		<view class="my-info">
			<!-- 此处改动， 13-15 -->
			<!-- //0默认头像 1审核未通过，更换头像 2已认证 3审核中 -->
			<view class="headMaskDiv" @click="handleOpenPage(0)" v-if="headStatus==0||headStatus==1 || headStatus==3">
				<view class="headMask">{{headTesx}}</view>
			</view>
			<view
				:class="['avatar', content.userIdentityStatus==0&&'vip-avatar1',content.userIdentityStatus==1&&'vip-avatar2',content.userIdentityStatus==2&&'vip-avatar3']">
				<image v-if="headStatus==3" :class="!vipTime?'avatar-pic':'avatar-pic-vip'"
					:style="{'margin-top':content.userIdentityStatus==2?'38rpx':'0!important'}"
					src="../../static/logo.png" mode="aspectFill"></image>
				<image v-else :class="!vipTime?'avatar-pic':'avatar-pic-vip'"
					:style="{'margin-top':content.userIdentityStatus==2?'38rpx':''}"
					:src="pic+'?imageView2/1/w/80/h/80'" mode="aspectFill" @click="handleOpenPage(0)"></image>
				<!-- 		<view v-if="vipFlag && vipTime" class="vip-crown">
					<image src="@/static/icon3/adasdasd.png" mode="aspectFill"></image>
					<text>金牌临时工</text>
				</view> -->
			</view>
			<view class="name">
				<text>{{ userInfo.user.userName }}</text>
				<image :src=" userInfo.user.sex==1 ? '/static/icon1/21.png' : '/static/icon1/55.png'" mode="aspectFill">
				</image>
			</view>
			<!-- <text>{{ userInfo.user.phonenumber }}</text> -->
			<view class="haoping-view" @click="isShowHaoPingInfo=true">
				<text>好评率 {{userInfo.haoping}}%</text>
				<image src="/static/icon3/12321.png" mode="aspectFill"></image>
			</view>
			<view class="category">
				<view @click="handleOpenPage(1)" v-if="false">
					<text>{{ userInfo.params.collectNum }}</text>
					<view>
						<text>我的收藏</text>
						<image src="/static/icon1/17.png" mode="aspectFill"></image>
					</view>
				</view>
				<view @click="handleOpenPage(2)">
					<text>{{ userInfo.params.inviteNum }}</text>
					<view>
						<text>邀请好友</text>
						<image src="/static/icon1/17.png" mode="aspectFill"></image>
					</view>
				</view>
				<view @click="handleOpenPage(3)">
					<view class="pingfen">
						<text
							:style="{color: userInfo.employeeRating>49?'#F39B19':'#FE4B28'}">{{ userInfo.employeeRating  }}</text>
						<!-- <image v-show="userInfo.integrity/100<=49" src="../../static/icon3/fengjinzhong.png"
							mode="aspectFill"></image> -->
					</view>
					<view>
						<text>评分</text>
						<image src="/static/icon1/17.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<view
			:class="[content.userIdentityStatus==0&&'jinpai-info1',content.userIdentityStatus==1&&'jinpai-info2',content.userIdentityStatus==2&&'jinpai-info3']">
			<view class="jinpai-info-coneten">
				<image v-if='content.userIdentityStatus==0' :src="require('../../static/icon3/1_1.png')"
					mode="aspectFill"></image>
				<image v-if='content.userIdentityStatus==1' :src=" require('../../static/icon3/2_2.png')"
					mode="aspectFill"></image>
				<image v-if='content.userIdentityStatus==2' :src=" require('../../static/icon3/3_3.png')"
					mode="aspectFill">
				</image>
				<view
					:class="['jinpai-info-coneten-text-view',content.userIdentityStatus==0&&'text1',content.userIdentityStatus==1&&'text2',content.userIdentityStatus==2&&'text3']">
					{{(content.userIdentityStatus==0&&'试用零工')||(content.userIdentityStatus==1&&'正式零工')||content.userIdentityStatus==2&&'金牌零工' }}
					<!-- 	<text>{{(content.userIdentityStatus==0&&'晋升正式，每日多接订单')||(content.userIdentityStatus==1&&'晋升金牌，每月现金奖励')||content.userIdentityStatus==2&&'提现免费，金牌补贴' }}</text> -->
				</view>
				<view @click="getJinpaiInfo()"
					:class="['jinpai-info-coneten-button',  content.userIdentityStatus==0&&'jinpai-info-coneten-button1',content.userIdentityStatus==1&&'jinpai-info-coneten-button2',content.userIdentityStatus==2&&'jinpai-info-coneten-button3']">
					查看详情</view>
			</view>
		</view>
		<view class="tips" @click="onOpen" v-if="content.approvalFlag==1"> 正式权益体验中，还有 7 天到期 <uni-icons type="forward"
				color='#FF851D' size="14"></uni-icons>
		</view>
		<!-- 列表-->
		<view :class=" ['list', content.approvalFlag==0&&'top']">
			<view @click="handleOpenPage(4)">
				<view>
					<image src="/static/icon1/28.png" mode="aspectFill"></image>
					<text>我的钱包</text>
				</view>
				<view>
					<text>余额: {{ userInfo.amount/100 }}</text>
					<image src="/static/icon1/17.png" mode="aspectFill"></image>
				</view>
			</view>
			<view @click="handleOpenPage(8)">
				<view>
					<image src="/static/icon1/32.png" mode="aspectFill"></image>
					<text class="newStatic">购买工装</text>
				</view>
				<view>
					<image src="/static/icon1/17.png" mode="aspectFill"></image>
				</view>
			</view>
			<view @click="handleOpenPage(11)">
				<view>
					<image src="/static/icon1/108.png" mode="aspectFill"></image>
					<text class="newStatic">零工培训</text>
				</view>
				<view>
					<image src="/static/icon1/17.png" mode="aspectFill"></image>
				</view>
			</view>
			<view @click="handleOpenPage(6)">
				<view>
					<image src="/static/icon1/30.png" mode="aspectFill"></image>
					<text>支付方式</text>
				</view>
				<view>
					<image src="/static/icon1/17.png" mode="aspectFill"></image>
				</view>
			</view>
			<view @click="handleOpenPage(7)">
				<view>
					<image src="/static/icon1/31.png" mode="aspectFill"></image>
					<text>实名认证<span>(可提升{{ real_auth_integrity}}分诚信值)</span></text>
				</view>
				<view>
					<image src="/static/icon1/17.png" mode="aspectFill"></image>
				</view>
			</view>
			<view @click="handleOpenPage(5)">
				<view>
					<image src="/static/icon1/29.png" mode="aspectFill"></image>
					<text>账户安全</text>
				</view>
				<view>
					<image src="/static/icon1/17.png" mode="aspectFill"></image>
				</view>
			</view>
			<!-- 			<view @click="handleOpenPage(10)">
				<view>
					<image src="/static/icon1/62.png" mode="aspectFill"></image>
					<text>帮助中心</text>
				</view>
				<view>
					<image src="/static/icon1/17.png" mode="aspectFill"></image>
				</view>
			</view> -->
			<view @click="handleOpenPage(9)">
				<view>
					<image src="/static/icon1/33.png" mode="aspectFill"></image>
					<text>系统设置</text>
				</view>
				<view>
					<image src="/static/icon1/17.png" mode="aspectFill"></image>
				</view>
			</view>
			<view @click="handleMakePhone">
				<view>
					<image src="/static/icon1/32.png" mode="aspectFill"></image>
					<text>客服电话</text>
				</view>
				<view>
					<text>{{ serviceTelephone }}</text>
					<image src="/static/icon1/17.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- 间隔线 -->
		<view class="hg-30"></view>
		<!-- 切换 -->
		<view class="switch" @click="handleSwitchUserType">
			<image src="/static/icon1/35.png" mode="aspectFill"></image>
			<text>切换到雇主</text>
		</view>
		<!-- 间隔线 -->
		<view class="hg-30"></view>
		<!-- 好评说明弹窗 -->
		<view class="mask" v-if="isShowHaoPingInfo" @click="isShowHaoPingInfo=false" @touchmove.stop.prevent>
			<view class="haopingInfo">
				<image src="../../static/icon3/haopinginfo.png" mode="aspectFill"></image>
				<view class="haopingInfo-image-title">好评率</view>
				<view class="haopingInfo-view">
					<view class="hapingInfo-title">什么是好评率？</view>
					<text class="hapingInfo-title-text">好评(“<image class="hapingInfo-title-text-image"
							src="@/static/icon1/1-1.png" mode="aspectFill"></image>太赞了”)+中评(“<image
							class="hapingInfo-title-text-image" src="@/static/icon1/2-1.png" mode="aspectFill"></image>
						一般般”)在总评价里的占比</text>
					<view class="hapingInfo-title" style="margin-top: 44rpx;">有什么作用？</view>
					<text class="hapingInfo-title-text">我们会将好评率公示给雇主，雇主会根据相关的数值判定是否需要雇佣您</text>
					<view class="hapingInfo-renzhen">
						<text>请认真完成工作，获得更多好评哦！</text>
					</view>
					<view class="hapingInfo-button" @click="isShowHaoPingInfo=false">知道了</view>
				</view>
			</view>
		</view>
		<view class="mask-head-image" v-if="isShowheadImage" @click="isShowheadImage=false">
			<image :src=" pic" mode="aspectFill" :style="{width: screenWidth + 'px', height:screenHeight + 'px' }">
			</image>
		</view>
		<kefu v-if="isShowKefu" @closePage="isShowKefu=false"></kefu>
		<!-- 试用正式提示 -->
		<Popupdown v-if="isShowPop" @popClose='popClose' :isShowPop='isShowPop'></Popupdown>
		<hasMonery v-if="ishasMonery" @toCloseIsMonery='popClose' @openKefu='handleMakePhone'></hasMonery>
	</view>
</template>
<script>
	import kefu from '../../components/xjbg/kefu.vue'
	import hasMonery from './hasMonery.vue'
	export default {
		props: {
			userInfo: {
				type: Object,
				default: () => {},
			},
			completePercent: {
				type: Number,
				default: 0,
			},
			// 每次页面出现时，isShow变化
			isShowStaff: {
				type: Number,
				default: 0
			},
		},
		components: {
			kefu,
			hasMonery
		},
		watch: {
			isShowStaff: function(newVal) {
				this.real_auth_integrity = uni.getStorageSync('real_auth_integrity')
				this.serviceTelephone = uni.getStorageSync('serviceTelephone')
				this.vipFlag = uni.getStorageSync('userInfo').user.vipFlag
				if (this.vipFlag) {
					this.computationTime()
				}
				this.isDefultHead()
			}
		},
		data() {
			return {
				isShowPop: false,
				vipJinPai: '../../static/icon3/adasdasd.png',
				vipZuanSi: "../../static/icon3/ZuanSiadasdasd (2).png",
				MoRen: '../../static/logo.png',
				pic: '', //新增修改
				vipFlag: 0, //0不是vip雇员，1vip雇员 2 钻石
				real_auth_integrity: '', //实名认证诚信值奖励
				isPageShow: false, //是否显示页面
				serviceTelephone: '400-98393', //客服电话
				isShowheadImage: false,
				isShowHaoPingInfo: false,
				expirationTime: '',
				vipTime: '',
				isShowKefu: false,
				screenWidth: '',
				screenHeight: '',
				headTesx: "",
				content: {},
				ishasMonery: false
			}
		},
		methods: {
			// 关闭
			popClose() {
				this.isShowPop = false
				this.ishasMonery = false
			},
			// 查看
			onOpen() {
				this.isShowPop = true
			},
			goindex() {
				console.log('点击差')
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 实名认证 已认证
			real_name(e) {},
			// 打开内页面
			handleOpenPage(page) {
				if (page == 11) {
					uni.navigateTo({
						url: '/pages/help/help'
					})
				} else if (page == 0) {
					uni.navigateTo({
						url: '/pages/user-info/user-info'
					})
				} else if (page == 1) {
					uni.navigateTo({
						url: '/pages/my-collect/my-collect'
					})
				} else if (page == 2) {
					uni.navigateTo({
						url: '/pages/invite-friend/invite-friend'
					})
				} else if (page == 3) {
					uni.navigateTo({
						url: '/pages/score/score'
					})
				} else if (page == 4) {
					if (this.userInfo.user.payPwd) {
						uni.navigateTo({
							url: '/pages/my-wallet/my-wallet'
						})
					} else {
						uni.showToast({
							title: '请先设置支付密码~',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/account-security/account-security?path=wallet'
							})
						}, 800)
					}
				} else if (page == 5) {
					uni.navigateTo({
						url: '/pages/account-security/account-security'
					})
				} else if (page == 6) {
					uni.navigateTo({
						url: '/pages/pay-way/pay-way'
					})
				} else if (page == 7) {
					uni.navigateTo({
						url: '/pages/real-name/real-name'
					})
				} else if (page == 8) {
					uni.navigateTo({
						url: '/pages/buy-clothing/buy-clothing'
					})
				} else if (page == 10) {
					uni.navigateTo({
						url: '/pages/clock/clock'
					})
				} else if (page == 18) {
					uni.navigateTo({
						url: '/pages/my/level'
					})
				} else {
					uni.navigateTo({
						url: '/pages/system-set/system-set'
					})
				}
			},
			//切换用户身份
			async handleSwitchUserType() {
				if (this.userInfo.amount == 0) {
					uni.showModal({
						title: '切换身份联系在线客服',
						content: '',
						success: (res) => {
							if (res.confirm) {
								// uni.makePhoneCall({
								// 	phoneNumber: this.serviceTelephone
								// })
								uni.navigateTo({
									url: '/pages/onLinePage/kefu?userId=' + uni.getStorageSync(
										'userInfo').userId
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				} else {
					this.ishasMonery = true
				}
			},
			// 获取客服电话
			async getServiceTelephone() {
				let res = await this.$fetch(this.$api.property_list_by_type_and_key, {
					type: 1,
					key: 'telephone'
				}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.serviceTelephone = res.data
			},
			// 打客服电话
			handleMakePhone() {
				this.isShowKefu = true
				this.popClose()
			},
			//0默认头像 1审核未通过，更换头像 2已认证 3审核中
			isDefultHead() {
				let avatarto = (this.userInfo.user.avatarto == null || this.userInfo.user.avatar == this.userInfo.user
					.avatarto) ? this.userInfo.user.avatar : this.userInfo.user.avatarto
				let idavaterStatus = this.userInfo.user.idavaterStatus
				this.pic = avatarto ? uni.getStorageSync('imgPath') + avatarto :
					'https://images.linglinggong.net/FqbM4OLbmiUwDDB984eZl5lJudxS'
				// console.log('头像',this.pic)
				// console.log(this.pic,uni.getStorageSync("pics"),uni.getStorageSync('imgPath')); 
				if (uni.getStorageSync("pics") == '' || uni.getStorageSync("pics") == null) {
					uni.setStorageSync("pics", uni.getStorageSync('imgPath') + avatarto)
				}
				this.headStatus = idavaterStatus
				// !avatarto && idavaterStatus == 0 ? 0 : avatarto && idavaterStatus == 0 ? 1 : avatarto &&
				// 	idavaterStatus == 1 ? 2 : avatarto && idavaterStatus == 2 ? 3 : 0
				// console.log(this.headStatus ,"默认头像");
				if (this.headStatus == 0) {
					this.headTesx = "更换头像"
				} else if (this.headStatus == 1) {
					this.headTesx = "审核失败"
				} else if (this.headStatus == 2) {
					this.headTesx = "已认证"
				} else if (this.headStatus == 3) {
					this.headTesx = "审核中"
				}
			},
			getJinpaiInfo() {
				uni.navigateTo({
					url: '/pages/grow/grow'
				})
			},
			computationTime() {
				let d = new Date(),
					y = d.getFullYear(),
					m = d.getMonth() + 1
				let toDay = d.getDate()
				let lastDay = new Date(y, m, 0).getDate()
				// this.vipTime = y + '.' + m + '.' + lastDay
				// this.expirationTime = lastDay - toDay
				this.vipTime = this.userInfo.vipEndDate;
				this.expirationTime = this.userInfo.vipRemainingTime;
			},
			//获取用户信息
			async getUserToken() {
				let res = await this.$fetch(this.$api.get_user_by_token, {}, 'POST')
				// userIdentityStatus, // /用户身份：0 试用零工 1 正式零工 2 金牌晋升期
				// idCardNum, //实名认证
				// frockFlag, //是否购买工装  0 否  1 是  studyFlag 是否学习   ,ensureAccount 保证金
				this.content = res.data
			},
		},
		mounted() {
			// 未登录的用户，跳转到登录页面
			if (!uni.getStorageSync('token')) {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			} else {
				this.getServiceTelephone()
				this.isPageShow = true
				this.getUserToken()
			}
			this.real_auth_integrity = uni.getStorageSync('real_auth_integrity')
		},
		created() {
			this.isDefultHead()
			this.screenWidth = uni.getStorageSync("imgWidth") == '' ? 750 : uni.getStorageSync("imgWidth")
			this.screenHeight = uni.getStorageSync("imghight") == "" ? 750 : uni.getStorageSync("imghight")
		},
	}
</script>
<style lang="less">
	page {
		background-color: #FFFFFF
	}

	.container {

		// 试用零工
		&>.bg {
			height: 444rpx;
			display: flex;
			justify-content: flex-start;
			position: relative;
			overflow: hidden;

			&>.my {
				// border: 1rpx solid #000000;
				z-index: 1;
				display: flex;
				// margin-top: 80rpx;
				flex-direction: row-reverse;
				margin-right: 30rpx;
				padding: 100rpx 30rpx;

				text {
					font-size: 12px;
					color: rgba(64, 33, 16, 0.70);
					margin-left: 30rpx;
				}

				image {
					width: 34rpx;
					height: 34rpx;
				}
			}

			.my-refuse {
				position: absolute;
				top: 92rpx;
				right: 24rpx;
				z-index: 1;
				width: 40rpx;
				height: 40rpx;
				// background: rgba(255,255,255,0.01);
			}

			//椭圆
			&::after {
				content: "";
				position: absolute;
				width: 200%;
				height: 474rpx;
				border-bottom-left-radius: 100%;
				border-bottom-right-radius: 100%;
				// border-radius: 100%;
				left: -50%;
				top: -30rpx;
				background: linear-gradient(135deg, #E9E9E9 0%, #909090 100%);
			}
		}

		// 正式零工
		&>.bg-zhengshi {
			height: 444rpx;
			display: flex;
			justify-content: flex-start;
			position: relative;
			overflow: hidden;

			&>.my {
				// border: 1rpx solid #000000;
				z-index: 1;
				display: flex;
				margin-right: 30rpx;
				padding: 100rpx 30rpx;

				text {
					font-size: 12px;
					color: rgba(64, 33, 16, 0.70);
					margin-right: 30rpx;
				}

				image {
					width: 34rpx;
					height: 34rpx;
				}
			}

			.my-refuse {
				position: absolute;
				top: 92rpx;
				right: 24rpx;
				z-index: 1;
				width: 40rpx;
				height: 40rpx;
				// background: rgba(255,255,255,0.01);
			}

			//椭圆
			&::after {
				content: "";
				position: absolute;
				width: 200%;
				height: 474rpx;
				border-bottom-left-radius: 100%;
				border-bottom-right-radius: 100%;
				// border-radius: 100%;
				left: -50%;
				top: -30rpx;
				background: linear-gradient(136deg, #FFC94B 0%, #FFB810 100%);
			}
		}

		// 金牌零工
		&>.bg-vip {
			height: 444rpx;
			display: flex;
			justify-content: flex-start;
			position: relative;
			overflow: hidden;

			&>.my {
				// border: 1rpx solid #000000;
				z-index: 1;
				display: flex;
				margin-right: 30rpx;
				padding: 100rpx 30rpx;

				text {
					font-size: 12px;
					color: rgba(64, 33, 16, 0.70);
					margin-right: 30rpx;
				}

				image {
					width: 34rpx;
					height: 34rpx;
				}
			}

			.my-refuse {
				position: absolute;
				top: 92rpx;
				right: 24rpx;
				z-index: 1;
				width: 40rpx;
				height: 40rpx;
				// background: rgba(255,255,255,0.01);
			}

			//椭圆
			&::after {
				content: "";
				position: absolute;
				width: 200%;
				height: 474rpx;
				border-bottom-left-radius: 100%;
				border-bottom-right-radius: 100%;
				// border-radius: 100%;
				left: -50%;
				top: -30rpx;
				background: linear-gradient(136deg, #00B554 0%, #00B683 100%);
				;
			}
		}

		&>.my-info {
			position: relative;
			padding-bottom: 30rpx;
			border-radius: 7px;
			margin: -202rpx 30rpx 0;
			box-shadow: 0 2px 14px 0 rgba(96, 52, 0, 0.1);
			background: #FFFFFF;
			display: flex;
			flex-direction: column;
			align-items: center;

			.headMaskDiv {
				position: absolute;
				top: -75rpx;
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			.headMask {
				width: 150rpx;
				height: 44rpx;
				background-color: rgba(0, 0, 0, 0.5);
				position: absolute;
				bottom: 0;
				z-index: 1;
				font-size: 20rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 44rpx;
				text-align: center;
			}

			&>.avatar {
				position: absolute;
				top: -96rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				&>.avatar-pic {
					width: 156rpx;
					height: 156rpx;
					border-radius: 50%;
					// 头像未加载时展示小蚂蚁  新增修改
					background-image: url(../../static/logo.png);
					background-position: 0 0;
					background-size: 150rpx 150rpx;
				}

				&>.crown {
					// border: 1px solid #55aa7f;
					position: absolute;
					left: 0;
					top: -50rpx;
					width: 98rpx;
					height: 74rpx;
				}
			}

			&>.name {
				height: 48rpx;
				margin: 128rpx 0 16rpx;
				display: flex;
				position: relative;
				align-items: center;

				&>text {
					font-size: 17px;
				}

				&>image {
					position: absolute;
					right: -46rpx;
					width: 26rpx;
					height: 26rpx;
				}
			}

			&>text {
				height: 34rpx;
				font-size: 12px;
				color: rgba(64, 33, 16, 0.70);
			}

			&>.category {
				margin-top: 48rpx;
				background-color: #FFFFFF;
				display: flex;
				width: 100%;

				&>view {
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					flex: 1;

					&>text {
						font-size: 22px;
						color: #F39B19;
						height: 60rpx;
					}

					&>view:not(.pingfen) {
						display: flex;
						align-items: center;

						text {
							font-size: 12px;
							color: rgba(64, 33, 16, 0.70);
							text-align: center;
							margin-right: 2rpx;
						}

						image {
							width: 14.2rpx;
							height: 14.2rpx;
						}
					}

					&::after {
						content: "";
						position: absolute;
						right: 0rpx;
						width: 2rpx;
						height: 50rpx;
						background: #F0F0EF;
						border-radius: 2.5px;
					}
				}
			}
		}

		&>.top {
			margin-top: 50rpx;
		}

		&>.list {

			// border: 1px solid #000000;
			// margin-top: 50rpx;
			&>view {
				padding: 20rpx 30rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				letter-spacing: 0;

				&>view:first-child {
					display: flex;
					align-items: center;

					&>image {
						margin-right: 30rpx;
						width: 60rpx;
						height: 60rpx;
					}

					span {
						margin-left: 20rpx;
						color: rgba(64, 33, 16, 0.50);
					}
				}

				&>view:last-child {
					display: flex;
					align-items: center;
					color: rgba(64, 33, 16, 0.50);

					&>text {}

					&>image {
						margin-left: 30rpx;
						width: 16rpx;
						height: 26rpx;
					}
				}

				&::after {
					content: "";
					position: absolute;
					bottom: 0rpx;
					width: 720rpx;
					height: 2rpx;
					background: #F2F2F2;
				}
			}
		}

		&>.switch {
			margin: 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 36rpx;
				height: 30rpx;
				margin-right: 20rpx;
			}

			text {
				height: 40rpx;
				color: #4A4A4A;
				letter-spacing: 0;
			}
		}
	}

	.mask-head-image {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #000000;
		z-index: 9999;
	}

	.haoping-view {
		width: 184rpx;
		height: 32rpx;
		background: #FCC928;
		border-radius: 16rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #2F0E00;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		&>image {
			width: 20rpx;
			height: 20rpx;
		}
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, .5);
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.haopingInfo {
		width: 630rpx;
		height: 719rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		&>image {
			width: 403rpx;
			height: 92rpx;
			margin-top: -32rpx;
		}
	}

	.haopingInfo-image-title {
		width: 403rpx;
		height: 92rpx;
		margin-top: -92rpx;
		font-size: 40rpx;
		font-weight: bold;
		color: #402110;
		line-height: 92rpx;
		text-align: center;
		z-index: 1;
	}

	.haopingInfo-view {
		height: 551rpx;
		width: 534rpx;
		align-items: flex-start;
		margin-top: 48rpx;
	}

	.hapingInfo-title {
		width: 256rpx;
		height: 44rpx;
		background-color: rgba(252, 201, 40, 0.2);
		border-radius: 22rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #F39A16;
		line-height: 44rpx;
		text-align: center;
		margin-bottom: 32rpx;
	}

	.hapingInfo-title-text {
		font-size: 30rpx;
		font-weight: 500;
		color: #515151;
		line-height: 30rpx;
	}

	.hapingInfo-title-text-image {
		width: 31rpx;
		height: 30rpx;
	}

	.hapingInfo-renzhen {
		width: 534rpx;
		margin-top: 52rpx;
		text-align: center;

		&>text {
			font-size: 28rpx;
			font-weight: 500;
			color: #FE4B28;
			line-height: 28rpx;
		}
	}

	.hapingInfo-button {
		width: 534rpx;
		height: 78rpx;
		background: #FCC928;
		border-radius: 8rpx;
		margin-top: 40rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #402110;
		line-height: 78rpx;
		text-align: center;
	}

	.jinpai-info1 {
		margin: 30rpx 30rpx -30rpx 30rpx;
		width: 690rpx;
		height: 120rpx;
		background: linear-gradient(135deg, #E9E9E9 0%, #909090 100%);
		box-shadow: 4rpx 6rpx 8rpx 2rpx rgba(166, 167, 183, 0.4), inset 2rpx 2rpx 0rpx 2rpx rgba(255, 255, 255, 0.9);
		border-radius: 20rpx;
	}

	.jinpai-info2 {
		margin: 30rpx 30rpx -30rpx 30rpx;
		width: 690rpx;
		height: 120rpx;
		background: linear-gradient(135deg, #FFE080 0%, #FFAB1A 100%);
		box-shadow: 4rpx 6rpx 8rpx 2rpx rgba(166, 167, 183, 0.4), inset 2rpx 2rpx 0rpx 2rpx rgba(255, 255, 255, 0.9);
		border-radius: 20rpx;
	}

	.jinpai-info3 {
		margin: 30rpx 30rpx -30rpx 30rpx;
		width: 690rpx;
		height: 120rpx;
		border-radius: 20rpx;
		background: linear-gradient(135deg, #00B554 0%, #00B682 100%);
		box-shadow: 4rpx 6rpx 8rpx 2rpx rgba(166, 167, 183, 0.4), inset 2rpx 2rpx 0rpx 2rpx rgba(255, 255, 255, 0.9);
	}

	.jinpai-info-coneten {
		width: 630rpx;
		height: 120rpx;
		margin-left: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		&>image {
			width: 90rpx;
			height: 94rpx;
		}
	}

	.jinpai-info-coneten-text-view {
		width: 400rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		margin-left: 16rpx;
		flex: 1;

		&>text:nth-child(1) {
			font-size: 32rpx;
			font-weight: 500;
		}

		&>text:nth-child(2) {
			font-size: 24rpx;
			font-weight: 400;
		}
	}

	.jinpai-info-coneten-button {
		width: 155rpx;
		height: 49rpx;
		font-size: 24rpx;
		line-height: 49rpx;
		text-align: center;
	}

	.jinpai-info-coneten-button1 {
		background: linear-gradient(316deg, #C6C6C6 0%, #D4D4D4 100%);
		box-shadow: 0px 6rpx 12rpx 2rpx rgba(113, 117, 129, 0.28), inset 1rpx 1rpx 0rpx 1rpx rgba(255, 255, 255, 0.69);
		border-radius: 28rpx;
		border: 2rpx solid rgba(0, 0, 0, 0);
		color: #333333;
	}

	.jinpai-info-coneten-button2 {
		background: linear-gradient(316deg, #FFDF95 0%, #FFEAA7 100%);
		box-shadow: 4rpx 6rpx 8rpx 2rpx rgba(166, 167, 183, 0.4), inset 1rpx 1rpx 0rpx 1rpx rgba(255, 255, 255, 0.9);
		border-radius: 20rpx;
		color: #333333;
	}

	.jinpai-info-coneten-button3 {
		background: #FCC928;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16), inset 1rpx 1rpx 0rpx 1rpx rgba(255, 255, 255, 0.41);
		border-radius: 78rpx;
		opacity: 1;
		color: #333333;
	}

	.vip-crown {
		width: 148rpx;
		height: 32rpx;
		background: linear-gradient(0deg, #111832, #343B54);
		white-space: nowrap;
		border-radius: 16rpx;
		position: absolute;
		top: 144rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		z-index: 999;

		&>image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 4rpx;
		}

		&>text {
			color: #FCC928;
			font-size: 20rpx;
			font-weight: 500;
			line-height: 32rpx;
		}
	}

	.avatar-pic-vip {
		width: 156rpx;
		height: 156rpx;
		border-radius: 50%;
	}

	.vip-avatar1 {
		width: 192rpx;
		height: 192rpx;
		background: url(../../static/icon3/1.png) center center/cover no-repeat;
	}

	.vip-avatar2 {
		width: 192rpx;
		height: 192rpx;
		background: url(../../static/icon3/2.png) center center/cover no-repeat;
	}

	.vip-avatar3 {
		width: 218rpx;
		height: 240rpx;
		background: url(../../static/icon3/3.png) center center/cover no-repeat;
		margin-top: -44rpx;
	}

	.ZuanSi-avatar {
		width: 170rpx;
		height: 170rpx;
		background-image: url(../../static/icon3/7868789.png);
		background-size: cover;
	}

	.pingfen {
		&>text {
			font-size: 44rpx;
			font-weight: 400;
			line-height: 40px;
		}

		&>image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.newStatic {
		display: flex;
		position: relative;

		::after {
			content: '新';
			position: absolute;
			width: 60rpx;
			height: 32rpx;
			background: #F85A41;
			border-radius: 4rpx;
			opacity: 1;
			top: -8rpx;
			right: -60rpx;
			text-align: center;
			line-height: 32rpx;
			color: #fff;
			animation: jump 0.8s ease-in-out infinite;
			font-size: 20rpx;
		}
	}

	@keyframes jump {

		0%,
		100% {
			transform: translateY(0);
			box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(248, 90, 65, 0.3);
		}

		50% {
			transform: translateY(-1px);
			box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(248, 90, 65, 0.6);
		}
	}

	.text1 {
		font-weight: bold;
		color: #333333;

		&>text:nth-child(2) {
			font-weight: 400;
			color: #4D4D4D;
		}
	}

	.text2 {
		font-weight: bold;
		color: #333333;

		&>text:nth-child(2) {
			font-weight: 400;
			color: #4D4D4D;
		}
	}

	.text3 {
		font-weight: bold;
		color: #FFF;

		&>text:nth-child(2) {
			font-weight: 400;
			color: #FFF;
		}
	}

	.tips {
		width: 694rpx;
		height: 74rpx;
		background: rgba(255, 133, 29, 0.1);
		border-radius: 38rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #FF851D;
		line-height: 74rpx;
		margin: 50rpx auto 0;
		text-align: center;
	}
</style>